import './markdown.scss'
import {designComponent, nextTick, useRefs, watch} from "plain-ui-composition";
import {renderMarkdown} from "./markdown-it";

export const Markdown = designComponent({
    name: 'pl-markdown',
    props: {
        md: {type: String, required: true},
    },
    setup({props}) {
        const {refs, onRef} = useRefs({
            el: HTMLDivElement,
        })
        watch(() => props.md, async (val: string | undefined) => {
            await nextTick()
            renderMarkdown(val, refs.el!)
        }, {immediate: true})
        return {
            render: () => {
                return (
                    <div class="pl-markdown" ref={onRef.el}/>
                )
            }
        }
    },
})
